<template>
  <div>
    <div class="name">{{ bookList.sectionName }}</div>
    <div class="bookDiv" v-if="bookList.elementDtoList">
      <div class="book">
        <div class="bookImg">
          <img :src="bookList.elementDtoList[1].photoUrl ">
        </div>
        <div class="bookName">{{ bookList.elementDtoList[1].name }}</div>
      </div>
      <div class="book1 ">
        <div class="bookImg1">
          <img :src="bookList.elementDtoList[0].photoUrl ">
        </div>
        <div class="bookName1">{{ bookList.elementDtoList[0].name }}</div>
      </div>
      <div class="book1 ">
        <div class="bookImg1">
          <img :src="bookList.elementDtoList[2].photoUrl ">
        </div>
        <div class="bookName1">{{ bookList.elementDtoList[2].name }}</div>
      </div>
      <div class="book1 ">
        <div class="bookImg1">
          <img :src="bookList.elementDtoList[3].photoUrl ">
        </div>
        <div class="bookName1">{{ bookList.elementDtoList[3].name }}</div>
      </div> 
      <div class="book1 ">
        <div class="bookImg1">
          <img :src="bookList.elementDtoList[4].photoUrl ">
        </div>
        <div class="bookName1">{{ bookList.elementDtoList[4].name }}</div>
      </div> 
    
    </div>
  </div>
</template>
<script>
let url = 'http://localhost:8080/static/data/homepage.json'
import Vue from 'vue'
import Axios from 'axios'
Vue.prototype.$http = Axios
export default {
  name: 'hello',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      bookList: {}
    }
  },
  created () {
    console.log('我已经运行了', url)
    let self = this
    Axios.get(url).then(function (res) {
      self.bookList = res.data.result.sectionDtoList[3]
      console.log(res.data.result.sectionDtoList[3])
    })
  }

}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.name{
  margin-top: 15px;
  margin-left: 10px;
  margin-bottom: 15px;
  display: inline-block;
  line-height: 21px;
  font-size: 17px;
  font-weight: bold;
  color: #3c4a55;
}
.book{
  margin-right:10px; 
  height: 170px;

}
.bookImg img{
  width: 345px;
  height: 130px;
}
.bookDiv{
  padding-left: 14px;
  display: flex;
  flex-wrap: wrap;
}
.bookName{
  font-size: 16px;
  line-height: 22px;
  color: #3c4a55;
 
}
.book1{
  margin-right:10px; 
  height: 145px;

}
.bookImg1 img{
  width: 168px;
  height: 95px;
}
.bookName1{
  font-size: 16px;
  line-height: 22px;
  color: #3c4a55;
}
</style>
